<script lang="ts" setup="">
const gamesList = [
	{ name: '英雄联盟', img: '/src/static/gamesImg/lol.jpg' },
	{ name: '地下城与勇士', img: '/src/static/gamesImg/dnf.jpg' },
	{ name: '孤岛惊魂', img: '/src/static/gamesImg/farcry.jpg' },
	{ name: '杀手', img: '/src/static/gamesImg/hitman.jpg' },
	{ name: '极品飞车', img: '/src/static/gamesImg/nfs.jpg' },
	{ name: '使命召唤', img: '/src/static/gamesImg/cod.jpg' },
]
</script>

<template>
	<div class="game-container">
		<a-row :gutter="20">
			<a-col
				class="card-col mr-8 mb-4"
				v-for="(data, index) in gamesList"
				:key="index"
			>
				<a-tooltip placement="topLeft">
					<template #title>{{ data.name }}</template>
					<a-card class="game-card" hoverable>
						<div class="game-img">
							<img :src="data.img" alt="" />
						</div>
						<div class="game-name text-center content-font">
							{{ data.name }}
						</div>
					</a-card>
				</a-tooltip>
			</a-col>
		</a-row>
	</div>
</template>

<style lang="scss" scoped>
.game-container {
	flex-wrap: wrap;
	flex: 1 0 40%;

	:deep(.ant-col-8) {
		flex: 1 0 40%;
		//max-width: unset;
	}

	:deep(.ant-row) {
		margin-left: 0 !important;
		padding-left: 20px;

		.ant-col:nth-of-type(6n) {
			margin-right: 0 !important;
		}
	}

	.game-card {
		color: #696969;
		font-weight: 600;

		:deep(.ant-card-body) {
			padding: 0;
		}

		.game-img {
			width: 100%;
			height: 300px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.game-name {
			padding: 20px;
			box-sizing: border-box;
			transition: all 0.3s;
		}

		&:hover {
			color: #1890ff;
		}
	}
}
</style>
